<template>
  <vab-chart :option="option" />
</template>

<script lang="ts" setup>
import { random } from 'lodash-es'
import { useSettingsStore } from '/@/store/modules/settings'

defineOptions({
  name: 'ZkDataProjectDetail',
})

const props = defineProps({
  x: {
    type: Array,
    default: [],
  },
  y: {
    type: Array,
    default: [],
  },
})

const settingsStore = useSettingsStore()
const { color } = storeToRefs(settingsStore)
let timer: any

const option = reactive<any>({
  grid: {
    top: 20,
    right: 20,
    bottom: 40,
    left: 40,
  },
  tooltip: {
    trigger: 'item',
  },
  xAxis: {
    type: 'category',
    data: props.x,
  },
  yAxis: {
    type: 'value',
  },
  series: {
    data: props.y,
    type: 'bar',
    label: {
      show: true,
      position: 'inside',
      color: '#ffffff',
    },
  },
})

watch(
  color,
  () => {
    option.color = [color.value]
  },
  { immediate: true }
)

onActivated(() => {
  timer = useIntervalFn(() => {
    option.series.data = [
      random(50, 100),
      random(10, 100),
      random(10, 100),
      random(10, 100),
      random(10, 100),
      random(50, 100),
      random(50, 200),
    ]
  }, 3000)
})

onDeactivated(() => {
  clearInterval(timer)
})
</script>
